{include file="common/head"/}
<style>
    .layui-table img{
        max-height:30px;
    }
    .layui-form-switch{
        margin-top: 0px;
    }
    .layui-form-onswitch i {
        left: 20px;}
    .layui-form-switch i{top:2px;}

</style>
<div class="admin-main layui-anim layui-anim-upbit">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>{$title}</legend>
    </fieldset>
    <blockquote class="layui-elem-quote">
        <a href="{:url('add')}" class="layui-btn layui-btn-small">{:lang('add')}栏目</a>
    </blockquote>
    <table lay-filter="list">
        <thead>
        <tr>
            <th lay-data="{field:'id', width:60,fixed: true}">编号</th>
            <th lay-data="{field:'catname', width:250}">栏目名称</th>
            <th lay-data="{field:'moduleid', width:120}">栏目图片</th>
            <th lay-data="{field:'listorder',align:'center',width:120}">{:lang('order')}</th>
            <th lay-data="{field:'status',width:130, align:'right'}">状态</th>
            <th lay-data="{field:'action',width:130, align:'right'}">操作</th>
        </tr>
        </thead>
        <tbody id="con">
        {volist name='list' id='v' key ='k'}
            <tr>
                <td class='visible-lg visible-md'>{$v['cate_id']}</td>
                <td class='text-left'>{$v['name']} &nbsp;</td>
                <td class='visible-lg visible-md'>
                    {notempty name='v.pic'}
                        <img src="__PUBLIC__/{$v['pic']}" alt=''></td>
                    {/notempty}
                <td class='visible-lg visible-md'>
                    <div class="layui-table-cell laytable-cell-1-sort">
                    <input name="undefined" data-id="{$v['cate_id']}" class="list_order layui-input" value=" {$v['sort']}" size="10"> </div>
                </td>
                <td>
                   <!-- <a class="layui-btn layui-btn-mini layui-btn-warm" lay-event="open">开启</a>-->
                    {if $v['status'] == 1}
                        <input type="checkbox" checked name="open"  value="{$v.cate_id}" lay-skin="switch" lay-filter="switchTest" title="开关">
                    {else/}
                        <input type="checkbox" name="open"  value="{$v.cate_id}" lay-skin="switch" lay-filter="switchTest" title="开关">
                    {/if}

                </td>
                <td class='visible-lg visible-md'>
                    <a class="layui-btn layui-btn-mini layui-btn-normal" href="{:url('edit',array('cate_id'=>$v['cate_id']))}">修改</a>
                    <a class="layui-btn layui-btn-mini layui-btn-danger" onclick="del({$v.cate_id})">删除</a>
                </td>
            </tr>
            {notempty name='v.son'}
                {volist name='v.son' id='v1' key ='k1'}
                    <tr>
                        <td class='visible-lg visible-md'>{$v1['cate_id']}</td>
                        <td class='text-left'>{$icon[1]}{$v1['name']} &nbsp;</td>
                        <td class='visible-lg visible-md'>
                            {notempty name='v1.pic'}
                                <img src="__PUBLIC__/{$v1['pic']}" alt=''></td>
                            {/notempty}
                        <td class='visible-lg visible-md'>
                            <div class="layui-table-cell laytable-cell-1-sort">
                                <input name="undefined" data-id="{$v1['cate_id']}" class="list_order layui-input" value=" {$v1['sort']}" size="10"> </div>
                        </td>
                        <td>
                            {if $v1['status'] == 1}
                            <input type="checkbox" checked name="open"  value="{$v1.cate_id}" lay-skin="switch" lay-filter="switchTest" title="开关">
                            {else/}
                            <input type="checkbox" name="open"  value="{$v1.cate_id}" lay-skin="switch" lay-filter="switchTest" title="开关">
                            {/if}
                        </td>
                        <td class='visible-lg visible-md'>
                            <a class="layui-btn layui-btn-mini layui-btn-normal" href="{:url('edit',array('cate_id'=>$v1['cate_id']))}">修改</a>
                            <a class="layui-btn layui-btn-mini layui-btn-danger" onclick="del({$v1.cate_id})">删除</a>
                        </td>
                    </tr>
                    {notempty name='v1.son'}
                        {volist name='v1.son' id='v2' key ='k2'}
                            <tr>
                                <td class='visible-lg visible-md'>{$v2['cate_id']}</td>
                                <td class='text-left'>{$nbsp}{$nbsp}{$icon[2]}{$v2['name']}</td>
                                <td class='visible-lg visible-md'>
                                    {notempty name='v2.pic'}
                                        <img src="__PUBLIC__/{$v2['pic']}" alt=''></td>
                                    {/notempty}
                                <td class='visible-lg visible-md'>
                                    <div class="layui-table-cell laytable-cell-1-sort">
                                        <input name="undefined" data-id="{$v2['cate_id']}" class="list_order layui-input" value=" {$v2['sort']}" size="10"> </div>
                                </td>
                                <td>
                                    {if $v2['status'] == 1}
                                    <input type="checkbox" checked name="open"  value="{$v2.cate_id}" lay-skin="switch" lay-filter="switchTest" title="开关">
                                    {else/}
                                    <input type="checkbox" name="open"  value="{$v2.cate_id}" lay-skin="switch" lay-filter="switchTest" title="开关">
                                    {/if}
                                </td>
                                <td class='visible-lg visible-md'>
                                    <a class="layui-btn layui-btn-mini layui-btn-normal" href="{:url('edit',array('cate_id'=>$v2['cate_id']))}">修改</a>
                                    <a class="layui-btn layui-btn-mini layui-btn-danger" onclick="del({$v2.cate_id})">删除</a>
                                </td>
                            </tr>
                        {/volist}
                    {/notempty}
                {/volist}
            {/notempty}
        {/volist}
        </tbody>
        <tfoot>
    </table>
</div>
{include file="common/foot"/}
<script src="__STATIC__/common/js/jquery.2.1.1.min.js"></script>
<script>
    layui.use(['form','table'], function(){
        var table = layui.table,$= layui.jquery,form = layui.form;
        table.init('list', {});

        $('body').on('blur','.list_order',function() {
            var cate_id = $(this).attr('data-id');
            var sort = $(this).val();
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post('{:url("cOrder")}',{cate_id:cate_id,sort:sort},function(res){
                layer.close(loading);
                if(res.code === 1){
                    layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                        location.href = res.url;
                    });
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                }
            })
        });

        //监听指定开关
        form.on('switch(switchTest)', function(){
            var status= this.checked ? 'true' : 'false';
            var cat_id = $(this).val();

            $.post('{:url("editStatus")}', {cat_id: cat_id,status:status}, function (data) {
                if (data.code === 1) {
                    layer.alert(data.msg, {icon: 6});
                }else{
                    layer.msg(data.msg,{icon:5});
                }
            });
        });
    });

    function del(id) {
        layer.confirm('你确定要删除该栏目及其子栏目吗？', {icon: 3}, function (index) {
            $.post('{:url("del")}', {id: id}, function (data) {
                if (data.status === 1) {
                    layer.alert(data.info, {icon: 6}, function(index){
                        layer.close(index);
                        window.location.href=data.url;
                    });
                }else{
                    layer.msg(data.info,{icon:5});
                }
            });
            layer.close(index);
        });
    }
</script>